<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80">
      <el-form-item label="旅游主题" prop="carouselIds">
        <el-select :clearable="true" v-model="queryParams.travelGuidesId" placeholder="请选择主题">
          <el-option v-for="(travel,index) in TravelListQue" :key="index" :label="travel.travelGuidesName" :value="travel.id"></el-option>
          <!--            <el-option label="区域二" value="beijing"></el-option>-->
        </el-select>
      </el-form-item>
			<el-form-item label="创建时间">
				<el-date-picker
					v-model="dateRange"
					style="width: 240px"
					value-format="yyyy-MM-dd"
					type="daterange"
					range-separator="-"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
				></el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<!-- 工具栏 -->
		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button
					type="primary"
					plain
					icon="el-icon-plus"
					size="mini"
					@click="handleAdd"
					v-hasPermi="['btn.TravelNode.add']"
				>新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="danger"
					plain
					icon="el-icon-delete"
					size="mini"
					:disabled="multiple"
					@click="handleDelete"
					v-hasPermi="['btn.TravelNode.remove']"
				>删除</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="warning"
					plain
					icon="el-icon-download"
					size="mini"
					@click="handleExport"
					v-hasPermi="['btn.TravelNode.export']"
				>导出</el-button>
			</el-col>
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>
		<!-- 表单组件 -->
		<el-table v-loading="loading" :data="travelNodeList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column v-if="false" label="主题旅游节点id" align="center" prop="id" />
			<el-table-column v-if="false" label="主题旅游id" align="center" prop="travelGuidesId" />
			<el-table-column v-if="false" label="景区id" align="center" prop="scenicSpotId" />
			<el-table-column v-if="false" label="文章id" align="center" prop="articleId" />
			<el-table-column label="主题旅游节点名称" align="center" prop="travelNodeName" />
			<el-table-column v-if="false" label="主题旅游节点环境" align="center" prop="travelNodeEnv" />
			<el-table-column label="主题旅游节点详情" align="center" prop="travelNodeDetails" />
			<el-table-column v-if="false" label="分类ID" align="center" prop="categoryId" />
			<el-table-column v-if="false" label="分类名称" align="center" prop="categoryName" />
      <el-table-column label="预览图" align="center" prop="picShow" width="110">
        <template slot-scope="scope">
          <el-image :src="scope.row.picShow"
                    style="width: 100px; height: 100px"
                    :preview-src-list="getImgList(scope.row.picShow)" />
        </template>
      </el-table-column>
			<el-table-column label="标签" align="center" prop="tags" />
			<el-table-column label="热度" align="center" prop="hot" />
			<el-table-column label="评分" align="center" prop="score" />
			<el-table-column v-if="false" label="开放时间" align="center" prop="businessTime" />
			<el-table-column v-if="false" label="景区地址" align="center" prop="address" />
			<el-table-column v-if="false" label="纬度" align="center" prop="latitude" />
			<el-table-column v-if="false" label="经度" align="center" prop="longitude" />
			<el-table-column v-if="false" label="门票" align="center" prop="ticket" />
			<el-table-column label="上传人" align="center" prop="username" />
			<el-table-column label="创建时间" align="center" prop="createDate" />
			<el-table-column label="修改时间" align="center" prop="changeDate" />
			<el-table-column label="备注" align="center" prop="remark" />
			<el-table-column v-if="false" label="购票跳转地址" align="center" prop="url" />
			<el-table-column label="封面图地址" align="center" prop="pic" />
			<el-table-column v-if="false" label="文件ID" align="center" prop="mediaFileId" />
			<el-table-column label="排序" align="center" prop="sort" />
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_is_show" :value="scope.row.status"/>
        </template>
      </el-table-column>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button
						size="mini"
						type="text"
						icon="el-icon-edit"
						@click="handleUpdate(scope.row)"
						v-hasPermi="['btn.TravelNode.update']"
					>修改</el-button>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-delete"
						@click="handleDelete(scope.row)"
						v-hasPermi="['btn.TravelNode.remove']"
					>删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页组件 -->
		<el-pagination :current-page="queryParams.current" :total="total" :page-size="queryParams.size" style="padding: 30px 0; text-align: center;"
			layout="total, prev, pager, next, jumper" @current-change="getList" />
		<!-- 添加或修改TravelNode对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="650px" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="150px" label-position="left">
        <el-form-item label="封面图片：" prop="showPic">
          <!-- 上传图片 -->
          <el-upload class="avatar-uploader"
                     action=""
                     :show-file-list="false"
                     :http-request="uploadMainImg"
          >
            <img v-if="form.showPic" :src="form.showPic" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
				<el-form-item label="主题旅游节点id" prop="id">
					<el-input :disabled="true" v-model="form.id" placeholder="请输入主题旅游节点id" />
				</el-form-item>
        <el-form-item label="旅游主题" prop="travelGuidesId">
          <el-select :clearable="true" v-model="form.travelGuidesId" placeholder="请选择主题">
            <el-option v-for="(travel,index) in TravelListQue" :key="index" :label="travel.travelGuidesName" :value="travel.id"></el-option>
            <!--            <el-option label="区域二" value="beijing"></el-option>-->
          </el-select>
        </el-form-item>
				<el-form-item label="主题旅游id" prop="travelGuidesId">
					<el-input :disabled="true" v-model="form.travelGuidesId" placeholder="请输入主题旅游id" />
				</el-form-item>
				<el-form-item v-if="false" label="景区id" prop="scenicSpotId">
					<el-input :disabled="true" v-model="form.scenicSpotId" placeholder="请输入景区id" />
				</el-form-item>
        <el-form-item label="关联文章" prop="travelGuidesId">
          <el-select
            v-model="form.articleId"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="selectLoading">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
				<el-form-item label="文章id" prop="articleId">
					<el-input :disabled="true" v-model="form.articleId" placeholder="请输入文章id" />
				</el-form-item>
				<el-form-item label="主题旅游节点名称" prop="travelNodeName">
					<el-input v-model="form.travelNodeName" placeholder="请输入主题旅游节点名称" />
				</el-form-item>
				<el-form-item v-if="false" label="主题旅游节点环境" prop="travelNodeEnv">
					<el-input v-model="form.travelNodeEnv" placeholder="请输入主题旅游节点环境" />
				</el-form-item>
				<el-form-item label="主题旅游节点详情" prop="travelNodeDetails">
					<el-input v-model="form.travelNodeDetails" type="textarea" placeholder="请输入主题旅游节点详情" />
				</el-form-item>
				<el-form-item v-if="false" label="分类ID" prop="categoryId">
					<el-input v-model="form.categoryId" placeholder="请输入分类ID" />
				</el-form-item>
				<el-form-item v-if="false" label="分类名称" prop="categoryName">
					<el-input v-model="form.categoryName" placeholder="请输入分类名称" />
				</el-form-item>
				<el-form-item v-if="false" label="标签" prop="tags">
					<el-input v-model="form.tags" placeholder="请输入标签" />
				</el-form-item>
				<el-form-item label="热度" prop="hot">
					<el-input v-model="form.hot" placeholder="请输入热度" />
				</el-form-item>
				<el-form-item label="评分" prop="score">
					<el-input v-model="form.score" placeholder="请输入评分" />
				</el-form-item>
				<el-form-item v-if="false" label="开放时间" prop="businessTime">
					<el-input v-model="form.businessTime" placeholder="请输入开放时间" />
				</el-form-item>
				<el-form-item v-if="false" label="景区地址" prop="address">
					<el-input v-model="form.address" placeholder="请输入景区地址" />
				</el-form-item>
				<el-form-item v-if="false" label="纬度" prop="latitude">
					<el-input v-model="form.latitude" placeholder="请输入纬度" />
				</el-form-item>
				<el-form-item v-if="false" label="经度" prop="longitude">
					<el-input v-model="form.longitude" placeholder="请输入经度" />
				</el-form-item>
				<el-form-item v-if="false" label="门票" prop="ticket">
					<el-input v-model="form.ticket" placeholder="请输入门票" />
				</el-form-item>
				<el-form-item label="上传人" prop="username">
					<el-input :disabled="true" v-model="form.username" placeholder="请输入上传人" />
				</el-form-item>
				<el-form-item label="创建时间" prop="createDate">
					<el-input :disabled="true" v-model="form.createDate" placeholder="请输入创建时间" />
				</el-form-item>
				<el-form-item label="修改时间" prop="changeDate">
					<el-input :disabled="true" v-model="form.changeDate" placeholder="请输入修改时间" />
				</el-form-item>
        <el-form-item label="状态" prop="status">
          <!--					<el-input v-model="form.status" placeholder="请输入状态,1:正常，0:不展示" />-->
          <el-radio-group v-model="form.status">
            <el-radio
              v-for="dict in dict.type.sys_is_show"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
				<el-form-item v-if="false" label="购票跳转地址" prop="url">
					<el-input  v-model="form.url" placeholder="请输入购票跳转地址" />
				</el-form-item>
				<el-form-item label="封面图地址" prop="pic">
					<el-input :disabled="true" v-model="form.pic" placeholder="请输入封面图地址" />
				</el-form-item>
				<el-form-item v-if="false" label="文件ID" prop="mediaFileId">
					<el-input v-model="form.mediaFileId" placeholder="请输入文件ID" />
				</el-form-item>
<!--				<el-form-item label="排序" prop="sort">-->
<!--					<el-input v-model="form.sort" placeholder="请输入排序" />-->
<!--				</el-form-item>-->
				<el-form-item label="排序" prop="sort">
					<el-input-number v-model="form.sort" controls-position="right" :min="0" />
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<!-- js脚本 -->
<script>
import { delTravelNodeById, addTravelNode, updateTravelNodeById, getTravelNodeById,loadDataList } from "@/api/pcwl/travelNode";
import { loadDataList as loadDataListTravel } from "@/api/pcwl/travelGuides";
import { loadDataList as loadDataListArticle } from "@/api/pcwl/article";
import { uploadImg } from "@/api/pcwl/file";
export default {
	name: "TravelNode",
	dicts: ['sys_normal_disable','sys_is_show'],
	data() {
		return {
      options: [],
      value: [],
      list: [],
      states: ["Alabama", "Alaska", "Arizona",
        "Arkansas", "California", "Colorado",
        "Connecticut", "Delaware", "Florida",
        "Georgia", "Hawaii", "Idaho", "Illinois",
        "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Maryland",
        "Massachusetts", "Michigan", "Minnesota",
        "Mississippi", "Missouri", "Montana",
        "Nebraska", "Nevada", "New Hampshire",
        "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Ohio",
        "Oklahoma", "Oregon", "Pennsylvania",
        "Rhode Island", "South Carolina",
        "South Dakota", "Tennessee", "Texas",
        "Utah", "Vermont", "Virginia",
        "Washington", "West Virginia", "Wisconsin",
        "Wyoming"],
      selectLoading: false,
      TravelListQue:[],
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 岗位表格数据
			travelNodeList: [],
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
			// 日期范围
			dateRange: [],
			// 查询参数
			queryParams: {
				current: 1,
				size: 10,
				id: undefined,
				travelGuidesId: undefined,
				scenicSpotId: undefined,
				articleId: undefined,
				travelNodeName: undefined,
				travelNodeEnv: undefined,
				travelNodeDetails: undefined,
				categoryId: undefined,
				categoryName: undefined,
				tags: undefined,
				hot: undefined,
				score: undefined,
				businessTime: undefined,
				address: undefined,
				latitude: undefined,
				longitude: undefined,
				ticket: undefined,
				username: undefined,
				createDate: undefined,
				changeDate: undefined,
				status: undefined,
				remark: undefined,
				url: undefined,
				pic: undefined,
				mediaFileId: undefined,
				sort: undefined,
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				id: [
					{  message: "主题旅游节点id不能为空", trigger: "blur" }
				],

			}
		};
	},
  mounted() {
    this.list = this.states.map(item => {
      return { value: `value:${item}`, label: `label:${item}` };
    });
  },
	created() {
    this.getTravelQue();
		this.getList();
	},
	methods: {
		/** 查询主题旅游节点信息表列表 */
		getList(currentPage=1) {
			this.loading = true;
			this.queryParams.current=currentPage;
			// loadDataList(this.queryParams).then(response => {
			loadDataList(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
				this.travelNodeList = response.data.records;
				this.total = response.data.total;
        // 使用for...of循环遍历对象数组
        for (let travelItem of this.travelNodeList) {
          travelItem.picShow=process.env.VUE_APP_MINIOURL+'/'+travelItem.pic;
        }
				this.loading = false;
			});
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				id: undefined,
				travelGuidesId: undefined,
				scenicSpotId: undefined,
				articleId: undefined,
				travelNodeName: undefined,
				travelNodeEnv: undefined,
				travelNodeDetails: undefined,
				categoryId: undefined,
				categoryName: undefined,
				tags: undefined,
				hot: undefined,
				score: undefined,
				businessTime: undefined,
				address: undefined,
				latitude: undefined,
				longitude: undefined,
				ticket: undefined,
				username: undefined,
				createDate: undefined,
				changeDate: undefined,
				status: undefined,
				remark: undefined,
				url: undefined,
				pic: undefined,
				mediaFileId: undefined,
				sort: undefined,
			};
			this.resetForm("form");
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.current = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm("queryForm");
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.travelNodeId)
			this.single = selection.length!=1
			this.multiple = !selection.length
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
      this.open = true;
			this.title = "添加主题旅游节点信息表";
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset();
			const travelNodeId = row.id || this.ids
			getTravelNodeById(travelNodeId).then(response => {
				this.form = response.data;
        this.form.showPic=process.env.VUE_APP_MINIOURL+'/'+this.form.pic;
        //加载sel选项
        let queryParam={};
        loadDataListArticle(queryParam).then(response => {
          console.log(response.rows)
          let temp=response.rows;
          this.list = temp.map(item => {
            return { value: `${item.id}`, label: `${item.title}` };
          });
          this.options = this.list;
          console.log(this.options)
          console.log(this.form.articleId)
          this.open = true;
        });
				this.title = "修改主题旅游节点信息表";
			});
		},
		/** 提交按钮 */
		submitForm: function() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					if (this.form.id != undefined) {
						updateTravelNodeById(this.form,this.form.id).then(response => {
							this.$modal.msgSuccess("修改成功");
							this.open = false;
							this.getList();
						});
					} else {
						addTravelNode(this.form).then(response => {
							this.$modal.msgSuccess("新增成功");
							this.open = false;
							this.getList();
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const travelNodeId = row.travelNodeId || this.ids;
			this.$modal.confirm('是否确认删除主题旅游节点信息表编号为"' + id + '"的数据项？').then(function() {
				return delTravelNodeById(travelNodeId);
			}).then(() => {
				this.getList();
				this.$modal.msgSuccess("删除成功");
			}).catch(() => {});
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download('travelNode/export', {
				...this.queryParams
			}, `post_${new Date().getTime()}.xlsx`)
		},
    // 获取轮播图
    getTravelQue(){
      let caxun={
        current:1,
        size:50
      };
      loadDataListTravel(caxun).then(response => {
        this.TravelListQue = response.data.records;
      });
    },
    remoteMethod(query) {
      let queryParam={};
      queryParam.title=query;

      console.log(queryParam);
      if (query !== '') {
        this.selectLoading = true;
        loadDataListArticle(queryParam).then(response => {
          console.log(response.rows)
          let temp=response.rows;
          this.list = temp.map(item => {
            return { value: `${item.id}`, label: `${item.title}` };
          });
            this.options = this.list;
            console.log(this.options)
          this.selectLoading = false;
        });
      } else {
        this.options = [];
      }
    },
    // 上传图片, file 上传的图片对象
    uploadMainImg(file) {
      // console.log('file', file)
      const data = new FormData()
      data.append('file', file.file)
      data.append('categoryId',8)
      uploadImg(data).then(response => {
        // console.log(process.env.VUE_APP_BASE_API);
        // console.log(process.env.VUE_APP_MINIOURL);

        // 将之前的图片删除，
        this.deleteImg()
        // 回显图片
        this.form.pic = response.data[0];
        this.form.showPic=process.env.VUE_APP_MINIOURL+'/'+response.data;
        // console.log(this.form.showPic);
      }).catch(error => {
        this.$message({
          type: 'error',
          message: '上传失败'
        })
      })
    },
    // 删除图片
    deleteImg() {
      // // 如果之前有图片，则删除之前的
      // if(this.form.pic && this.form.pic !== this.oldImageUrl
      // ) {
      //   // 发送请求删除
      //   commonApi.deleteImg(this.formData.imageUrl)
      // }
      console.log('删除图片', this.form.pic)
    },
    /** 图片查看 */
    getImgList(workPhoto) {
      console.log(workPhoto);
      let arr = [];
      if (Array.isArray(workPhoto))
      {
        // if (workPhoto.length == 1) {
        //   arr.push(workPhoto[0])
        // } else if (workPhoto.length == 0)  {
        //   return arr;
        // } else {
        //   for(let i = 0;i < workPhoto.length;i++){
        //     arr.push(workPhoto[i+index])
        //     if(i+index >= workPhoto.length-1){
        //       index = 0-(i+1);
        //     }
        //   }
        // }
      }
      else
      {
        arr.push(workPhoto)
      }
      return arr;
    }
	}
};
</script>
<style scoped>
.avatar-uploader el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
//border: 2px solid black;
}
</style>

